<template>
    <div>
        <el-main style="padding:0 20px 20px 20px">
            <el-form :model="form" ref="formRef">
                <sc-title title="角色对象"></sc-title>
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="编号" prop="number">
                            <el-input v-model="form.number" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="form.name" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="备注" prop="remark">
                            <el-input  v-model="form.remark" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <sc-title title="角色分配列表"></sc-title>
                <el-scrollbar height="400px">
                    <el-form-item prop="column">
                        <ts-form-table-select   v-model="dataList" :mapping="mapping" :fileName="fileName" dragSort placeholder="暂无数据" :defineProps="tableProps"
                        @deleteRow="deleteRow">
                            <template #tableContent>
                                <el-table-column prop="employeeNumber" label="员工编号">
                                </el-table-column>
                                <el-table-column prop="employeeName" label="员工名称">
                                </el-table-column>
                                <el-table-column prop="deptName" label="员工部门">
                                </el-table-column>
                            </template>
                        </ts-form-table-select>
                    </el-form-item>
                </el-scrollbar>
            </el-form>
        </el-main>
        <div class="button-position">
            <el-button type="primary" :icon="Check" @click="submit">保存</el-button>
            <el-button @click="updateVisible" :icon="Close">取消</el-button>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance, onMounted, watch } from 'vue';
import { Check, Close } from '@element-plus/icons-vue';
import { ElNotification } from 'element-plus';
import Api from '@/api/model/user'
import sysApi from '@/api/model/system.js'
import tsFormTableSelect from '@/components/tsFormTableSelect/index.vue'
import scTitle from '@/components/scTitle/index.vue'
import {deduplication} from '@/utils/arr.js'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
const form = ref({
})
const dataList = ref([])
const deleteList = ref([])
const formRef = ref()
const tableProps = ref({
    value:'employeeId'
})
const mapping = ref([
    {
        value:'id',
        label:'employeeId'

    },
    {
        value:'number',
        label:'employeeNumber'

    },
    {
        value:'name',
        label:'employeeName'

    }
])
const fileName = ref('ChooseEmployeeReport')
onMounted(() => {
    getInit()
})
const getInit = async () => {
    let res = await Api.optRole.viewAssignerList.post(props.paramsData)
    if (res.code == '200') {
        form.value = res.data
        dataList.value = res.dataList
    }
}

const updateVisible = () => {
    emit('updatetable')
}
const restAddFormData = () => {
    formRef.value.resetFields();
}
const deleteRow = (row)=>{
    row.operationType = 'delete'
    deleteList.value.push(row)
}
const submit = async () => {
    let params = {
        bean: form.value,
        dataList: dataList.value.concat(deleteList.value)
    }
    let res = await Api.optRole.updateAssignerList.post(params);
    if (res.code == 200) {
        restAddFormData();
        ElNotification.success({ title: '', message: '更新成功！', duration: 2000 });
        emit('updatetable', true)
    }
}
</script>
<style lang="scss" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
            color: #606266
        }
    }
}</style>
